<template>
  <div class="app-container">
    <!--    头部-->
    <div class="my-detail-header">
      <div>
        <span class="my-header-name">{{ form.pdName }}</span>
        <span class="my-header-code">{{ form.pdCode }}</span>
      </div>
      <el-descriptions :column="4">
        <el-descriptions-item label="创建人">{{ form.createBy }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ form.createTime }}
        </el-descriptions-item>
        <el-descriptions-item label="修改人">{{ form.updateBy }}</el-descriptions-item>
        <el-descriptions-item label="修改时间">{{ form.updateTime }}
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <!--    身体-->
    <div class="my-detail-body">
      <el-tabs type="border-card">
        <el-tab-pane label="物料信息">
          <el-divider>
            <div class="my-divider">基础信息</div>
          </el-divider>
          <el-descriptions :column="2" :colon="false">
            <el-descriptions-item :labelStyle="descLabelStyle" label="物料编号">{{ form.pdCode }}
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="物料名称">{{ form.pdName }}
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="规格型号">{{ form.pdSpecType }}
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="单位">
              {{ form.pdUnitType ? form.gbsGoodUnit.guName : '' }}
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="物料类型">
              <dict-tag :options="getGbsGoodType" :value="form.pdGoodClass" />
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="物料属性">
              <dict-tag :options="getGbsGoodAttr" :value="form.pdGoodType" />
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="物料分类">
              {{ form.pdGoodClass ? form.gbsGoodClass.gcName : '' }}
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="状态">
              <dict-tag :options="getStatus" :value="form.pdStatus" />
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="有效期">
              <div v-if="form.pdValidDate">
                {{ form.pdValidDate.toString().substring(0, form.pdValidDate.lastIndexOf('=')) }}
                <dict-tag :options="getTime" style="display: inline-block"
                          :value="form.pdValidDate.toString().substring(form.pdValidDate.lastIndexOf('=') + 1)"
                />
              </div>
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="报警天数">
              {{ '提前 ' + form.pdAlarmDate + ' 天报警' }}
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="库存上限">{{ form.pdMax }}
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="库存下限">{{ form.pdMin }}
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="采购价格" :span="2">{{ form.pdOriginPrice }}
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="备注">{{ form.pdDesc }}</el-descriptions-item>
          </el-descriptions>

          <el-divider>
            <div class="my-divider">图片</div>
          </el-divider>
          <div v-if="getImgs">
            <ImagePreview v-for="item in getImgs" :key="item" :src="item" :width="120" :height="120" />
          </div>
          <el-skeleton style="width: 120px" v-else>
            <template slot="template">
              <el-skeleton-item variant="image" style="width: 120px; height: 120px;" />
            </template>
          </el-skeleton>

          <el-divider>
            <div class="my-divider">附件</div>
          </el-divider>
          <div v-if="getFiles">
            <transition-group
              class="upload-file-list el-upload-list el-upload-list--text"
              name="el-fade-in-linear"
              tag="ul"
            >
              <li
                class="el-upload-list__item ele-upload-list__item-content"
                v-for="(file, index) in getFiles"
                :key="file"
              >
                <el-link :href="file" :underline="false" target="_blank">
                  <span class="el-icon-document"> {{ getFileName(file) }} </span>
                </el-link>
              </li>
            </transition-group>
          </div>
          <div v-else>
            <el-skeleton v-for="item in 3" :key="item" />
          </div>
        </el-tab-pane>
        <el-tab-pane label="库存记录">
          <el-table :data="storageInfo">
            <el-table-column label="仓库名称" prop="storageWName" />
            <el-table-column label="仓库编号" prop="storageWCode" />
            <el-table-column label="库区名称" prop="storageSaName" />
            <el-table-column label="库区编号" prop="storageSaCode" />
            <el-table-column label="库位名称" prop="storageSlName" />
            <el-table-column label="库位编号" prop="storageSlCode" />
            <el-table-column label="库存" prop="storageNum" />
          </el-table>
          <pagination
            v-show="storageTotal > 0"
            :total="storageTotal"
            :page.sync="storageQueryParams.pageNum"
            :limit.sync="storageQueryParams.pageSize"
            @pagination="getStoreInfo"
          />
        </el-tab-pane>
        <!--        <el-tab-pane label="入库记录">-->
        <!--        </el-tab-pane>-->
        <!--        <el-tab-pane label="出库记录">-->
        <!--        </el-tab-pane>-->
      </el-tabs>
    </div>

    <!--    关闭按钮-->
    <MyConfirmBtnGroup :after-cancel-open-page="backPage" />
  </div>
</template>

<script>
import { getGood } from '@/api/yyj/gbs/good'
import MyConfirmBtnGroup from '@/components/MyConfirmBtnGroup/index.vue'
import { listProduct } from '@/api/yyj/wm/info/goods'

export default {
  name: 'MaterialDetail',
  components: { MyConfirmBtnGroup },
  dicts: [
    'gbs_good_type',
    'gbs_good_attr',
    'yyj_common_status',
    'yyj_common_time'],
  data() {
    return {
      backPage: '/gbs/material',
      descLabelStyle: {
        minWidth: '120px !important'
      },
      pdCode: '',
      form: {},
      storageQueryParams: {
        pageNum: 1,
        pageSize: 10,
        pdCode: ''
      },
      storageTotal: 0,
      storageInfo: []
    }
  },
  computed: {
    getGbsGoodType() {
      return this.dict.type.gbs_good_type
    },
    getGbsGoodAttr() {
      return this.dict.type.gbs_good_attr
    },
    getStatus() {
      return this.dict.type.yyj_common_status
    },
    getTime() {
      return this.dict.type.yyj_common_time
    },
    getFiles() {
      if (!this.form || !this.form.gbsGoodFiles) {
        return null
      }
      return this.form.gbsGoodFiles.map((e) => e.fileName)
    },
    getImgs() {
      if (!this.form || !this.form.gbsGoodUrls) {
        return null
      }
      return this.form.gbsGoodUrls.map((e) => e.urlName)
    }
  },
  created() {
    this.pdCode = this.$route.params && this.$route.params.pdCode
    Promise.all([this.getDetail(this.pdCode), this.getStoreInfo(this.pdCode)])
  },
  methods: {
    // 获取产品库存信息
    async getStoreInfo(pdCode) {
      this.storageQueryParams.pdCode = pdCode
      const res = await listProduct(this.storageQueryParams)
      console.log('res ', res)
      this.storageInfo = res.rows
      this.storageTotal = res.total
    },
    /** 查询详情 */
    async getDetail(pdCode) {
      const res = await getGood(pdCode)
      this.form = res.data
    },
    // 获取文件名称
    getFileName(name) {
      // 如果是url那么取最后的名字 如果不是直接返回
      if (name.lastIndexOf('/') > -1) {
        return name.slice(name.lastIndexOf('/') + 1)
      } else {
        return name
      }
    },
    afterSubmit() {
      this.$tab.closeOpenPage()
      this.$tab.refreshPage({
        path: this.backPage
      })
      this.$modal.closeLoading()
    }
  }
}
</script>

<style scoped lang="scss">
@import "@/assets/styles/yyj/detail";
</style>
